<template>
  <div class="about">
    <ul>
        <li v-for="(item,index) in list" :key="index" :class="{active:check == item}" @click="checkFtn(item)">{{item}}</li>
    </ul>
  </div>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
export default {
  setup() {
    const data = reactive({
      list:['2000以内','2000-3000','3000-5000','5000-8000'],
      check: '',
      goods:[{price:1100},{price:2100},{price:3100},{price:4100},{price:5100}]
    })
    const checkFtn = (val) => {
       data.check = data.check == val?'':val
       let arr = [];
    //    console.log(val);
       if (val == '2000以内') {
          arr = data.goods.filter(item => item.price <= 2000)
       } else {
          let str = val.split('-');
          arr = data.goods.filter(item => item.price >= str[0] && item.price <= str[1])
       }
    //    console.log(arr);
    //    } else if(val == '2000-3000'){
    //      arr = data.goods.filter(item => item.price >= 2000 && item.price <= 3000)
    //    }
       
    }
    return {
      ...toRefs(data),
      checkFtn
    }
  },
};
</script>
<style lang="scss" scoped>
 .active{
    color: red;
 }
</style>